import React, { Component } from 'react'
import { BasicPagination, compareNum, TableCustomize, openSuccessModal, openModalMessage } from '../../../components/TableCustomize';
import * as APIService from '../../../axios/api_yq'
export default class MonthEstimate extends Component {
    state = {
        dataSource: [],
        inquire: [],
        paging: {},
        visible: false,
        formData: {},
        drawerVisible: false,
        drawerTitle: '',
        createTime: null,
        one: false,
        loading: false,
        some: null,
        selectedRows: [],
        advanced: false,
        values: {},
        selectedRowKeys: [],
    };
    UNSAFE_componentWillMount() {
        this.fetch()
    }
    //初始化加载数据
    fetch = (pageNum = 1, pageSize = 10) => {
        const { values } = this.state
        this.setState({
            loading: true,
            one: false,
            drawerVisible: false,
            formData: {},
            paging: { pageNum: pageNum, pageSize: pageSize }
        })
        let a = { pageNum: pageNum, pageSize: pageSize }
        setTimeout(() => {
            this.search({ ...values, ...a })
        }, 300);
    }
    // 查询接口
    search = (value, paging) => {
        // APIService.queryPlanMonthChange(value, paging).then((item) => {
        //     console.log('查询数据', item);
        //     if (item.data.code === 200) {
        //         this.setState({
        //             loading: false,
        //             dataSource: item.data.data.data,
        //             // 操作后清除选中
        //             selectedRowKeys: [],
        //             selectedRows: [],
        //             some: null,
        //             paging: {
        //                 pageNum: item.data.data.pageNum,
        //                 pageSize: item.data.data.pageSize,
        //                 total: item.data.data.total,
        //             }
        //         })
        //     } else {
        //         openModalMessage('error', item.data.msg)
        //     }
        // })
    }
    render() {
        const { selectedRowKeys, advanced, some, one, paging, loading, dataSource, formData, drawerVisible, drawerTitle } = this.state;
        const rowSelection = {
            type: 'checkbox',
            selectedRowKeys: selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                let some = [...selectedRows].length
                this.setState({
                    some: some,
                    selectedRows: selectedRows,
                    selectedRowKeys: selectedRowKeys
                }, () => {
                    console.log('选中个数', this.state.some, '选中详细数据', this.state.selectedRows);
                })
            },
            // 固定在左侧
            fixed: true
        }
        const columns = [
            {
                title: '序号',
                dataIndex: 'number',
                width: 50,
                ellipsis: true,
                fixed: 'left',
                render: (text, record, index) =>
                    <div>
                        {index + 1}
                    </div>
            },
            {
                title: '变更类型',
                dataIndex: 'changeType',
                sorter: (a, b) => compareNum(a.changeType, b.changeType),
                ellipsis: true,
                width: 120,
            },
            {
                title: '批号',
                width: 120,
                dataIndex: 'batchNo',
                sorter: (a, b) => compareNum(a.batchNo, b.batchNo),
                ellipsis: true,
            },
            {
                title: '装配部门',
                width: 110,
                dataIndex: 'assemblyDept',
                ellipsis: true,
            },
            {
                title: '变更内容',
                width: 130,
                dataIndex: 'changeMessage',
                ellipsis: true,
            },
            {
                title: '变更日期',
                width: 130,
                dataIndex: 'changeTime',
                sorter: (a, b) => compareNum(a.changeTime, b.changeTime),
                ellipsis: true,
            },
            {
                title: '变更人',
                dataIndex: 'user',
                ellipsis: true,
            },
        ]
        return (
            <div>
                <TableCustomize
                    rowSelection={rowSelection}
                    columns={columns}
                    rowKey={(record) => record.id}
                    dataSource={dataSource}
                    pagination={false}
                    loading={loading}
                    allowDrafting={true}
                />
                <BasicPagination pageNum={paging.pageNum} pageSize={paging.pageSize} total={paging.total} loadData={this.fetch} />

            </div>
        )
    }
} 